<template>
  <section>
    <div class="mapBox">
      <!-- <h4>中国地图</h4> -->
      <div id="main" style="width: 100%;height:100%;"></div>
    </div>
    <div class="tipsMap">
      <p>车场总计：{{parkingLotNum}}个</p>
      <p>空余车位20%以内</p>
      <p>空余车位20%—40%</p>
      <p>空余车位40%以上</p>
    </div>
  </section>
</template>

<script>
import {
  getAllProvinceLive
} from '../api/api';
export default {
  name: 'cenMap',
  data() {
    return {
      msg: '1',
      parkingLotNum: ''
    }
  },
  mounted() {
    this.getMapData();
    setInterval(() => {
      console.log(this.msg)
      this.getMapData('3', '9');
    }, 3000);
  },
  methods: {
    getMapData(symbolSizeSmall, symbolSizeBig) {
      getAllProvinceLive().then(res => {
        console.log(res.data)
        console.log(res.data.length);
        this.parkingLotNum = res.data.length;
        //紧张
        var nervous = new Array;

        // 前端模拟台湾坐标
        // var nervous = [{
        //   name: '台湾',
        //   value: ['121.08802', '24.12807', '紧张']
        // }]
        //适中
        var moderate = new Array;
        //空闲
        var free = new Array;
        res.data.forEach((item, index) => {
          var entity = {};
          entity.name = item.park_name;
          var letAndLong = new Array;
          letAndLong.push(item.latitude);
          letAndLong.push(item.longitude);
          letAndLong.push(item.live);
          entity.value = letAndLong;

          if (item.live == '紧张') {
            console.log("紧张紧张紧张紧张紧张紧张紧张紧张紧张紧张紧张")
            nervous.push(entity);
          } else if (item.live == '适中') {
            console.log("适中适中适中适中适中适中适中适中适中适中适中")
            moderate.push(entity);
          } else if (item.live == '空闲') {
            console.log("空闲空闲空闲空闲空闲空闲空闲空闲空闲空闲空闲")
            free.push(entity);
          }
        });

        console.log(nervous);
        console.log(moderate);
        console.log(free);

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
          geo: {
            map: 'china',
            show: true,
            roam: false,

            itemStyle: {
              normal: {
                areaColor: '#ff0000',
                borderColor: '#25e0e5',
                shadowColor: '#56c1d3',
                shadowBlur: 20,
              }
            }
          },
          series: [{
            type: 'map',
            map: 'china',
            geoIndex: 1,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: true, // 存在legend时显示
            label: {
              normal: {
                show: false,

              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff'
                },

                borderType: 'dashed',
              }
            },
            roam: false,
            itemStyle: {

              normal: {
                //区域颜色
                areaColor: '#101f5a',
                //身份边框
                borderColor: '#158fc2',
                //省份边框宽度
                borderWidth: 1,

              },
              emphasis: {
                //区域颜色
                areaColor: '#101f5a',
                //身份边框
                borderColor: '#158fc2',
                //省份边框宽度
                borderWidth: 1,
              }
            },

          },

          {
            name: '紧张',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: nervous,
            symbolSize: symbolSizeBig,
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: '#e02737'
              }
            },
            zlevel: 1
          },
          {
            name: '适中',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: moderate,
            symbolSize: symbolSizeBig,
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,

            itemStyle: {
              normal: {
                color: '#ffe407'
              }
            },
            zlevel: 1
          },
          {
            name: '空闲',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: free,
            symbolSize: symbolSizeBig,
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: '#61effd'
              }
            },
            zlevel: 1
          }

          ]
        };
        var option2 = {
          geo: {
            map: 'china',
            show: true,
            roam: false,

            itemStyle: {
              normal: {
                areaColor: '#ff0000',
                borderColor: '#25e0e5',
                shadowColor: '#56c1d3',
                shadowBlur: 20,
              }
            }
          },
          series: [{
            type: 'map',
            map: 'china',
            geoIndex: 1,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: true, // 存在legend时显示
            label: {
              normal: {
                show: false,

              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff'
                },

                borderType: 'dashed',
              }
            },
            roam: false,
            itemStyle: {

              normal: {
                //区域颜色
                areaColor: '#101f5a',
                //身份边框
                borderColor: '#158fc2',
                //省份边框宽度
                borderWidth: 1,

              },
              emphasis: {
                //区域颜色
                areaColor: '#101f5a',
                //身份边框
                borderColor: '#158fc2',
                //省份边框宽度
                borderWidth: 1,
              }
            },

          },

          {
            name: '紧张',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: nervous,
            symbolSize: symbolSizeSmall,
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: '#e02737'
              }
            },
            zlevel: 1
          },
          {
            name: '适中',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: moderate,
            symbolSize: symbolSizeSmall,
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,

            itemStyle: {
              normal: {
                color: '#ffe407'
              }
            },
            zlevel: 1
          },
          {
            name: '空闲',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: free,
            symbolSize: symbolSizeSmall,
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: '#61effd'
              }
            },
            zlevel: 1
          }

          ]
        };

        if (this.msg == '1') {
          myChart.setOption(option);
          this.msg = '2';
        } else {
          myChart.setOption(option2);
          this.msg = '1'
        }
      })
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mapBox {
  position: absolute;
  left: 5.2rem;
  top: 2.7rem;
  width: 8rem;
  height: 6rem;
  color: #ff0;
  opacity: 1;
}

.tipsMap {
  position: absolute;
  left: 5.5rem;
  top: 2.7rem;
  width: 2rem;
  height: 1.2rem;
  background: url(../assets/pic_map01.png) no-repeat left top;
  padding: 0.25rem 0 0 0.6rem;
}

.tipsMap p {
  color: #18b3f0;
  font-size: 0.14rem;
  text-align: left;
}
.tipsMap p:first-child {
  color: #e6d44f;
  font-size: 0.18rem;
}
</style>
